<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrap {
            margin-top: 50px;
        }

        nav {
            width: 600px;
            display: flex;
            line-height: 40px;
            text-align: center;
            margin: 0 auto;
        }

        nav li {
            flex: 1;
            border: 1px solid #333;
        }

        /* nav li+li {
            border-left: 0;
        } */
        nav li:not(:first-child) {
            border-left: 0;
        }

        nav .active {
            background-color: #6ff;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <nav>
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </nav>
    </div>
</body>
<script>
    // 导航栏切换 
    // 点击每一个li =>   当前li 背景颜色变天蓝色 字体变白色

    var liList = document.querySelectorAll("nav li");
    console.log(liList);

    // liList[0].onclick = function () {
    //     liList[0].className = "active";
    // }
    // liList[1].onclick = function () {
    //     liList[1].className = "active";
    // }
    // liList[1].onclick = function () {
    //     liList[1].className = "active";
    // }
    // liList[1].onclick = function () {
    //     liList[1].className = "active";
    // }


    // 问题:
    // 1. 页面加载时,事件只做绑定,并不触发 => 循环结束,全局的li和i
    //     li =>  <li>06</li>
    //     i  =>  6

    // 2. 点击时 =>触发点击事件 => 执行既定的函数 => 查找li和i  => 自己并没有声明li和i => 向外跳一层找父作用域(全局作用域)  => 找全局的li和i

    // debugger;
    for (let i = 0; i < liList.length; i++) {
        let li = liList[i]; // 每个li
        li.onclick = function () {
            // debugger;
            console.log(li, i);
            li.className = "active";
        }
    }
    // console.log("页面加载完毕:", li, i);


    // {
    //     let i = 0;
    //     {
    //         let li = liList[i]; // 每个li
    //         li.onclick = function () {
    //             debugger;
    //             console.log(li, i);
    //             li.className = "active";
    //         }
    //     }
    // }

    // {
    //     let i = 1;
    //     {
    //         let li = liList[i]; // 每个li
    //         li.onclick = function () {
    //             debugger;
    //             console.log(li, i);
    //             li.className = "active";
    //         }
    //     }
    // }




</script>

</html>